<template>
  <div class="login">
    <p class="header">佲家智微</p>
    <!-- <img class="bg" src="../../assets/images/login-bg.d2e175e8.png" alt=""> -->
    <div class="login-from">
      <div class="logo-box">
        <img src="../../assets/images/logo.png" alt>
      </div>
      <div class="sty-name">茶机运营后台</div>
      <div class="form-box">
        <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px">
          <el-form-item label="111" prop="name">
            <el-input
              v-model="loginForm.name"
              placeholder="请输入手机号"
              :maxlength="11"
              prefix-icon="el-icon-mobile-phone"
              prop="name"
            ></el-input>
          </el-form-item>
          <el-form-item label="111" prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-button @click="login('loginForm')">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  props: {},
  data () {
    return {
      loginForm: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            min: 11,
            max: 11,
            message: '长度在 11 个字符',
            trigger: 'blur'
          },
          {
            pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created () {
    // this.$getCode('22222').then(res => {
    //   //console.log(res)
    // }).catch(err => {})
  },
  mounted () {},
  watch: {},
  methods: {
    login (formName) {
      // console.log(formName)
      this.$refs[formName].validate(valid => {
        // //console.log(valid);
        if (valid) {
          // console.log('submit!')
          let code = `mobile=${this.loginForm.name}&password=${
            this.loginForm.password
          }&sence=3`
          this.$getCode(code).then(res => {
            // console.log(res)
            this.http.webLogin(res).then(res => {
              // console.log(res)
              if (res.data.errno == '000') {
                sessionStorage.setItem('auth', res.data.result.data.auth)
                // sessionStorage.setItem('userinfo', JSON.stringify(res.data.result.data))
                sessionStorage.setItem('mobile', res.data.result.data.mobile)
                sessionStorage.setItem('id', res.data.result.data.id)
                this.$router.push({ path: '/' })
              } else {
                // console.log(0)
                this.$message.error(res.data.errmsg)
              }
            }).catch(err => {})
          }).catch(err => {})
          // this.http.webLogin()
          // //console.log(code)
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
<style scoped>
.form-box >>> .el-form-item__label {
  width: 0 !important;
  display: none;
}
.form-box >>> .el-form-item__content {
  margin: 0 !important;
}
</style>
